<template>
    <!-- this.$store.getters.getShowBlueLayout，getShowBlueLayoutNew 判断是否显示蓝色背景，蓝色新背景 -->
    <div id="app" :class="[this.$store.getters.getShowBlueLayout ? 'i-layout-blue' : (this.$store.getters.getShowBlueLayoutNew ? 'i-layout-blueNew' : '') ]">
        <router-view />
    </div>
</template>
<script>
    import {
        on,
        off
    } from 'view-design/src/utils/dom';
    import {
        setMatchMedia
    } from 'view-design/src/utils/assist';

    import {
        mapMutations
    } from 'vuex';
    import globalV from '@/libs/common/global.js'
    setMatchMedia();

    export default {
        name: 'app',
        data() {
            return {
                pageName: ''
            }
        },
        methods: {
            ...mapMutations('admin/layout', [
                'setDevice'
            ]),
            handleWindowResize() {
                this.handleMatchMedia();
            },
            handleMatchMedia() {
                const matchMedia = window.matchMedia;

                if (matchMedia('(max-width: 600px)').matches) {
                    this.setDevice('Mobile');
                } else if (matchMedia('(max-width: 992px)').matches) {
                    this.setDevice('Tablet');
                } else {
                    this.setDevice('Desktop');
                }
            },
            //网页页签切换回调函数
            handleTabVisibilityChange() {
                if (document.hidden == false && globalV.userId && globalV.userId != localStorage.getItem('userId')) {
                    globalV.userId = localStorage.getItem('userId');
                    this.showGlobalMask();
                }
            },
            //显示账号变化时的全局遮罩
            showGlobalMask() {
                let self = this;
                this.$Spin.show({
                    render: (h) => {
                        return h('div', {
                            class: "globalMask"
                        }, [
                            h('Icon', {
                                props: {
                                    type: 'ios-information-circle',
                                    color: '#fff',
                                    size: 18
                                }
                            }),
                            h('span', '账号信息变化,点击'),
                            h('span', {
                                on: {
                                    click() {
                                        self.hideGlobalMask();
                                        self.refresh();
                                    }
                                },
                            }, '刷新')
                        ])
                    }
                });
            },
            //隐藏遮罩
            hideGlobalMask() {
                this.$Spin.hide();
            },
            //刷新页面
            refresh() {
                let origin = ""
                let pathname = ""
                if (window && window.location) {
                    origin = window.location.origin
                    pathname = window.location.pathname === "/" ? "" : window.location.pathname
                }
                let href = origin + pathname;
                window.location = href;
            }
        },
        mounted() {
            globalV.userId = localStorage.getItem('userId') || 0;
            on(window, 'resize', this.handleWindowResize);
            on(window, 'visibilitychange', this.handleTabVisibilityChange);
            this.handleMatchMedia();
        },
        beforeDestroy() {
            off(window, 'resize', this.handleWindowResize);
            off(window, 'visibilitychange', this.handleTabVisibilityChange);
        }
    }
</script>
<style lang="scss">

    .globalMask{
        color:#fff;
        padding:10px 15px;
        background:rgba(0,0,0,0.8);
        .ivu-icon {
            margin-right:5px;
        }
        span:last-child{
            color: #40A7ff;
            &:hover{
            cursor:pointer;
            }
        }
    }
</style>
